<template>
  <div class="student">
    <h2>学生管理</h2>
    <div class="search_box">
      <el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline">
        <el-form-item label="学生状态" prop="state">
          <el-select v-model="student.state" placeholder="请选择学生状态">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生名称" prop="name">
          <el-input v-model="student.name" placeholder="请输入学生名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="student.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="search">搜索</el-button>
          <el-button plain icon="el-icon-bottom-left" @click="resetForm('resetForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="btn_box">
        <el-button type="primary">新增学员</el-button>
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary">批量导出</el-button>
        <el-button type="primary">查看报表</el-button>
      </div>
      <div>
        <el-table
          stripe
          :data="list"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="学生名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              {{scope.row.status === 1? '启用' : "禁用"}}
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
    </div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageIndex"
      :page-sizes="[8, 10, 30, 60]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle">
    </el-pagination>
  </div>
</template>

<script>
import { getStudents } from '../utils/api'
export default {
  name: 'student',
  data() {
    return {
      student: {
        state: null,
        name: '',
        mobile: ''
      },
      list: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      totle: 0,
      originList: []
    }
  },
  created() {
    this.getNewList(this.params)
  },
  methods: {
    // 定义获取学生信息的函数
    getNewList(params) {
      getStudents(params).then(res => {
          // console.log(res)
          this.list = res.newArr
          this.totle = res.totle
          this.originList = JSON.stringify(res.newArr)
      })
    },

    // 每页显示多少条数据变化时触发的函数
    handleSizeChange(size) {
      this.params.pageSize = size
      this.getNewList(this.params)
    },

    // 页码变化时触发的逻辑
    handleCurrentChange(page) {
      this.params.pageIndex = page
      this.getNewList(this.params)
    },

    // 点击进行数据搜索
    search() {
        this.list = JSON.parse(this.originList)
        if(this.student.state !== null) {
          this.list = this.list.filter((item, index, array) => {
            return item.status === this.student.state
          })
        }

        if(this.student.name !== '') {
           this.list = this.list.filter((item, index, array) => {
             return item.nickname.includes(this.student.name)
          })
        }


        if(this.student.mobile !== '') {
          this.list = this.list.filter((item, index, array) => {
             return item.mobile.includes(this.student.mobile)
          })
        }
    },


    // 点击重置数据还原
    // reset() {
    //   this.student = {
    //     state: null,
    //     name: '',
    //     mobile: ''
    //   }

    //   this.list = JSON.parse(this.originList) 
    // },
    resetForm(form) {
      this.$refs[form].resetFields();
      this.list = JSON.parse(this.originList) 
    }
  },
  // watch数据监听的方法 数据发生变化时可以出发对应的逻辑
  watch: {
    // 基本数据类型可以直接进行监听
    totle(to, from) {
      // from是数据变化之前的值 to数据变化之后的值
      // console.log(to, from)
    },

    'student.state'(to, from) {
      console.log('变化了')
    }
  }
}
</script>
<style lang="scss" scoped>
  .search_box{
    padding-left: 10px;
  }
  .content{
    padding: 10px;
    padding-right: 20px;
    margin-bottom: 20px;
    .btn_box{
      margin-bottom: 20px;
    }
  }
</style>
